<template>
	<up-upload
		:fileList="fileList1"
    :accept="props.accept"
		@afterRead="afterRead"
		@delete="deletePic"
		name="1"
		multiple
		:maxCount="10"
	></up-upload>
</template>

<script setup>
import { ref, watch } from 'vue';
import {isEmpty} from 'lodash-es'

const props = defineProps({
  files: {
    type: Array,
    default: []
  },
  accept: {
    type: String,
    default: 'image',
  }
})

const emit = defineEmits(['update:files']);

const fileList1 = ref([]);

/**
 * 监听files变化，赋值给fileList1
 */
watch(() => props.files, (val) => {
  if (!isEmpty(val)) {
    fileList1.value = val.map((item) => {
      return {
        url: item
      }
    })

  }
},
{
  immediate: true
}
);

// 删除图片
const deletePic = (event) => {
  fileList1.value.splice(event.index, 1);
  emit('update:files', fileList1.value);
};

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList1.value.length;
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = fileList1.value[fileListLen];
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });
    fileListLen++;
  }
  emit('update:files', fileList1.value);
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: 'test',
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data);
        }, 1000);
      },
    });
  });
};
</script>